<!--
  @author:  long
  @date:    2023/3/7
  @file:    客户联系人
  @require:
-->
<template>
  <div>
    <div class="flex items-center justify-between">
      <!--      <div class="text-gray-600 text-sm">-->
      <!--        <i class="i-bi-bookmarks-fill"></i>-->
      <!--        联系人-->
      <!--      </div>-->
      <TitleName title="联系人" icon="i-carbon-bookmark-filled"></TitleName>
      <div>
        <el-button type="primary" icon="Edit" @click="editContacts"
          >修改</el-button
        >
        <el-button type="primary" icon="Plus" @click="addContacts"
          >添加</el-button
        >
        <el-button type="primary" plain icon="UploadFilled">导出</el-button>
        <el-button type="primary" plain icon="Delete" @click="handleDel"
          >删除</el-button
        >
      </div>
    </div>
    <el-table
      class="mt-2"
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        header-align="center"
        align="center"
        type="selection"
        width="55"
        :selectable="selectable"
      />
      <el-table-column
        header-align="center"
        align="center"
        prop="contactName"
        label="联系人姓名"
      >
      </el-table-column>

      <el-table-column
        header-align="center"
        align="center"
        prop="contactNumber"
        label="手机号码"
      />
      <el-table-column
        header-align="center"
        align="center"
        prop="isChiefly"
        label="首要联系人"
      >
        <template #default="scope">
          <el-button
            link
            type="danger"
            size="small"
            v-if="scope.row.isChiefly == '1'"
          >
            首要联系人
          </el-button>
          <el-tooltip
            v-else
            effect="dark"
            content="切换为首要联系人"
            placement="top"
          >
            <el-button
              type="warning"
              size="small"
              @click="switchChange(scope.row)"
              >切换</el-button
            >
            <!--            <el-switch-->
            <!--              :disabled="scope.row.isChiefly == '1'"-->
            <!--              v-model="scope.row.isChiefly"-->
            <!--              active-value="1"-->
            <!--              inactive-value="0"-->
            <!--              @change="switchChange(scope.row)"-->
            <!--            >-->
            <!--            </el-switch>-->
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column
        header-align="center"
        align="center"
        prop="postCode"
        label="职务"
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="addressName"
        label="地址说明"
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="address"
        label="详细地址"
      />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="CustomerContact">
import { getCurrentInstance } from 'vue'
import {
  getDetailTactlist,
  updateForMainContact
} from '@/api/customerManage/customerList'
import { delContact } from '@/api/customerManage/contactList'
const router = useRouter()

const { proxy } = getCurrentInstance()
const props = defineProps({
  businessId: {
    type: String || Number
  }
})
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
  tableData: [],
  total: 0,
  selectionData: []
})
const { queryParams, tableData, total, selectionData } = toRefs(data)

// 字典 具体查看根目录DICT.md文件
const { contacts_role, duties_dict } = proxy.useDict(
  'contacts_role',
  'duties_dict'
)

/**
 * 开关切换
 */
function switchChange(row) {
  proxy
    .$confirm('是否切换首要联系人？', '提示', {
      type: 'warning'
    })
    .then(() => {
      let params = {
        entId: router.currentRoute.value.query.customerId,
        id: row.id
      }
      updateForMainContact(params).then(res => {
        proxy.$modal.msgSuccess(res.msg)
        getList()
      })
    })
    .catch(() => {})
}

/**
 * 编辑联系人
 */
function editContacts() {
  if (!selectionData.value.length) {
    proxy.$modal.msgWarning('请选择要编辑的数据')
    return
  }
  if (selectionData.value.length > 1) {
    proxy.$modal.msgWarning('只能编辑一条数据')
    return
  }
  router.push({
    path: '/customerManage/contactsModules/contactsEdit',
    query: { flag: 'update', contactsId: selectionData.value[0].id }
  })
}

/**
 * 添加联系人
 */
function addContacts() {
  router.push({
    path: '/customerManage/contactsModules/contactsAdd',
    query: {
      flag: 'add',
      customerId: router.currentRoute.value.query.customerId
        ? router.currentRoute.value.query.customerId
        : props.businessId
    }
  })
}

//如果是首要联系人 复选框禁用
function selectable(row, rowIndex) {
  //索引是从0开始，条件1是指只有第2行数据不被禁用
  if (row.isChiefly == '1') {
    return false //不禁用
  } else {
    return true //禁用
  }
}

/**
 * 获取列表数据
 */
function getList() {
  console.log('businessId', props.businessId)
  queryParams.value.id = router.currentRoute.value.query.customerId
    ? router.currentRoute.value.query.customerId
    : props.businessId
  console.log('queryParams', queryParams.value)
  getDetailTactlist(queryParams.value).then(res => {
    tableData.value = res.data.records
    total.value = res.data.total
  })
}

getList()
/**
 * 表格多选
 */
function handleSelectionChange(data) {
  selectionData.value = data
  console.info(selectionData.value)
}

/**
 * 删除方法
 */
function handleDel() {
  if (!selectionData.value.length) {
    proxy.$modal.msgWarning('请选择要删除的数据')
    return
  }
  proxy
    .$confirm('确认删除选中记录吗？', '提示', {
      type: 'warning'
    })
    .then(() => {
      let ids = selectionData.value
        .map(item => {
          return item.id
        })
        .join(',')
      const params = {
        ids
      }
      delContact(params).then(res => {
        proxy.$modal.msgSuccess(res.msg)
        getList()
      })
    })
}
</script>

<style scoped lang="scss"></style>
